import { createAsyncThunk, createSlice, createEntityAdapter } from "@reduxjs/toolkit";
import { client } from '../../api/client'

export const fetchNotifications = createAsyncThunk(
  "notifications/fetchNotifications",
  async (_, {getState}) => {
    const allNotifications = selectAllNotifications(getState())
    const [latestNotification] = allNotifications
    const latestTimestamp = latestNotification ? latestNotification.date : ''
    const response = await client.get(
      `/fakeApi/notifications?since=${latestTimestamp}`
    )
    return response.data
  }
)

const notificationAdapter = createEntityAdapter({
  sortComparer: (a, b) => b.date.localeCompare(a.date)
})

const notificationsSlice = createSlice({
  name: 'notifications',
  initialState: notificationAdapter.getInitialState(),
  reducers: {
    allNotificationsRead(state, action) {
      Object.values(state.entities).forEach(notification => {
        notification.read = true
      })
    }
  },
  extraReducers: {
    [fetchNotifications.fulfilled]: (state, action) => {
      notificationAdapter.upsertMany(state, action.payload)
      Object.values(state.entities).forEach(notification => {
        notification.isNew = !notification.read
      })
    }
  }
})

//export const selectAllNotifications = state => state.notifications
export const {
  selectAll: selectAllNotifications
} = notificationAdapter.getSelectors(state => state.notifications)

export const {allNotificationsRead} = notificationsSlice.actions
export default notificationsSlice.reducer